<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- less配置：
         插件--Easy LESS -- 扩展设置-- 在settings.json中编辑 -->
    <!--ps的使用方法: 
        显示标尺：Ctrl+R 或者 视图--标尺
        ps 参考线： 从标尺 按住鼠标左键 往下或者往右拖
        删除参考线： 视图--删除参考线
        选区工具： 选中看尺寸  , 取消选取 Ctrl+D
        切片工具： 右键查看属性 
        历史记录： 回到之前任意一个操作
        放大缩小： Alt+鼠标滚轮 
    -->

    <!-- 引入图标 link:favicon  (建议使用.icon后缀的)-->
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入字体文件 -->
    <link rel="stylesheet" href="./font/iconfont.css">
    <!-- 引入样式 pc端 -->
    <link rel="stylesheet" href="./css/pc.css">
    <!-- 当pc端屏幕小于1200px时 -->
    <link rel="stylesheet" href="./css/pc迷你版.css" media="screen and (max-width:1200px)">
    <!-- 当屏幕小于1025px时,应用pad样式 -->
    <link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1025px)">
    <!-- 当屏幕小于992px,应用phone样式 -->
    <link rel="stylesheet" href="./css/phone.css" media="screen and (max-width:992px)">
</head>

<body>
    <!-- 顶部 -->
    <!-- pad-hide是pad端样式的公共类名 -->
    <nav class="top-nav pad-hide">
        <!-- 大版心 -->
        <div class="wrap navlist">
            <a href="#">
                <i class="iconfont icon-fenlei"></i>
                集团网站
                <i class="iconfont icon-xialajiantouxiao"></i>
            </a>
            <a href="#">
                <i class="iconfont icon-yuyan"></i>
                选择区域/语言
                <i class="iconfont icon-xialajiantouxiao"></i>
            </a>
            <a href="#">
                <i class="iconfont icon-denglu-copy"></i>
                登录
            </a>
        </div>
    </nav>
    <!-- 头部 -->
    <header class="header">
        <!-- 头部版心 -->
        <div class="wrap header-height">
            <!-- logo -->
            <h1>
                <a href="#">
                    <img src="./images/huawei_logo.png" class="logo" alt="">
                </a>
            </h1>
            <!-- 中间导航 -->
            <nav class="pad-hide">
                <a href="#">个人及家庭产品</a>
                <a href="#">商用产品及方案</a>
                <a href="#">服务支持</a>
                <a href="#">合作伙伴与开发者</a>
                <a href="#">关于华为</a>
            </nav>
            <!-- 其它部分 -->
            <div class="more">
                <a href="#" class="pad-hide">
                    <i class="iconfont icon-gouwudai"></i>
                    在线购买
                    <i class="iconfont icon-xialajiantouxiao"></i>
                </a>
                <a href="#" class="iconfont icon-sousuoxiao"></a>
                <!-- pc-hide是pc端公共样式的类名 -->
                <!-- pad端显示 新图标 -->
                <a href="#" class="iconfont icon-gengduo1 pc-hide"></a>
            </div>
        </div>
    </header>
    <!-- 广告图部分 -->
    <div class="banner">
        <a href="#">
            <!-- pc端显示,移动端不显示 -->
            <!-- phone-hide是移动端样式类名 -->
            <img src="./images/banner1.jpeg" class="phone-hide" alt="">
            <!-- 移动端显示竖屏的图片 -->
            <img src="./images/phoneBanner.jpeg" class="pc-hide phone-show" alt="">
        </a>
    </div>
    <!-- 推荐信息 -->
    <!-- 小版心 -->
    <div class="recommand miniwrap">
        <!-- 标题 -->
        <div class="common-title">
            <h2>推荐信息</h2>
            <!-- ::after  用伪元素显示下划线-->
        </div>
        <!-- 内容部分(pc端样式) -->
        <!-- clearfix  清除浮动内容为空的影响 -->
        <ul class="content clearfix phone-hide">
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list01.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list02.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list03.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list04.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list05.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list06.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
            <li>
                <a href="#">
                    <!-- img+遮罩+文字 -->
                    <img src="./images/list07.jpeg" alt="">
                    <!-- 文字盒子 -->
                    <div class="txt">
                        <p>产品</p>
                        <h3>HUAWEI nova 9 Pro</h3>
                        <p>精彩,由我摄定</p>
                        <p>了解更多 <span>&gt;</span></p>
                    </div>
                    <!-- 使用伪元素实现遮罩 ::after -->
                </a>
            </li>
        </ul>
        <!-- 内容(移动端) -->
        <ul class="contentphone pc-hide phone-show">
            <li class="first">
                <img src="./images/list03.jpeg" alt="">
            </li>
            <li class="first">
                <img src="./images/list04-m.jpeg" alt="">
            </li>
            <li class="first">
                <img src="./images/list05.jpeg" alt="">
            </li>
            <li class="first">
                <img src="./images/list06.jpeg" alt="">
            </li>
            <li class="first">
                <img src="./images/list07.jpeg" alt="">
            </li>
        </ul>
    </div>
    <!-- 底部广告图部分 -->
    <div class="banner">
        <a href="#">
            <!-- 移动端不显示 -->
            <img src="./images/techclass.jpeg" alt="" class="phone-hide">
            <a href="#" class="more phone-hide">了解更多</a>
            <!-- 移动端显示竖屏图片,pc端不显示 -->
            <img src="./images/techclass-m.jpeg" alt="" class="pc-hide phone-show">
        </a>
    </div>
    <!-- 新闻与活动 -->
    <div class="news miniwrap">
        <!-- 标题 -->
        <div class="common-title">
            <h2>新闻与活动</h2>
            <!-- ::after -->
        </div>
        <!-- 新闻盒子 -->
        <ul class="news-list">
            <li>
                <a href="#">
                    <!-- 图片盒子 -->
                    <div class="imgbox">
                        <img src="./images/news01.jpg" alt="">
                    </div>
                    <!-- 文字盒子 -->
                    <div class="txtbox">
                        <!-- 标题盒子 -->
                        <h3>2023世界移动大会</h3>
                        <!-- 日期 -->
                        <div class="date">
                            <span>
                                <i class="iconfont icon-dingwei"></i>
                                西班牙，巴塞罗那
                            </span>
                            <span>
                                <i class="iconfont icon-rili"></i>
                                2022年2月28日-3月3日
                            </span>
                        </div>
                        <!-- 段落盒子 -->
                        <!-- ellipsis文字溢出隐藏类名 -->
                        <p class="ellipsis">
                            本届大会以“跃升数字生产力，加速迈向智能世界”为主题，分享面向智能世界的展望以及对整体战略的思考，探讨行业数字化的发展方向和企业转型之路，探讨行业数字化的发展方向和企业转型之路
                        </p>
                    </div>
                </a>
                <!-- ::after使用伪元素显示(展会活动) -->
            </li>
            <li>
                <a href="#">
                    <!-- 图片盒子 -->
                    <div class="imgbox">
                        <img src="./images/news02.jpg" alt="">
                    </div>
                    <!-- 文字盒子 -->
                    <div class="txtbox">
                        <!-- 标题盒子 -->
                        <h3>2023世界移动大会</h3>
                        <!-- 日期盒子 -->
                        <div class="date">
                            <span>
                                <i class="iconfont icon-dingwei"></i>
                                西班牙，巴塞罗那
                            </span>
                            <span>
                                <i class="iconfont icon-rili"></i>
                                2022年2月28日-3月3日
                            </span>
                        </div>
                        <!-- 段落盒子 -->
                        <!-- ellipsis文字溢出隐藏类名 -->
                        <p class="ellipsis">
                            本届大会以“跃升数字生产力，加速迈向智能世界”为主题，分享面向智能世界的展望以及对整体战略的思考，探讨行业数字化的发展方向和企业转型之路，探讨行业数字化的发展方向和企业转型之路
                        </p>
                    </div>
                </a>
                <!-- ::after使用伪元素显示(展会活动) -->
            </li>
            <li>
                <!-- 右边滚动盒子 -->
                <div class="scroll">
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                    <a href="#">
                        <h3>华为发布2022年年度报告：经营平稳，持续生存和发展</h3>
                        <span>2022年3月3日</span>
                    </a>
                </div>
                <!-- ::after使用伪元素显示(新闻) -->
            </li>
        </ul>
        <div class="bottom-title">
            <a href="#">更多活动</a>
            <a href="#">更多新闻</a>
        </div>
    </div>
    <!-- 底部列表 -->
    <footer>
        <div class="title miniwrap">
            <div class="top">
                <div class="left phone-hide">
                    <a href="#">首页</a>
                </div>
                <div class="right phone-hide">
                    <a href="#" class="iconfont icon-sousuoxiao"></a>
                </div>
                <div class="search pc-hide phone-show">
                    <p>请输入关键词</p>
                    <a href="#" class="iconfont icon-sousuoxiao"></a>
                </div>
            </div>
            <div class="center">
                <!-- pc端和pad端显示,phone端隐藏 -->
                <dl class="phone-hide">
                    <dt>关于华为</dt>
                    <dd>
                        <a href="#">个人及家庭产品</a>
                    </dd>
                    <dd>
                        <a href="#">新闻</a>
                    </dd>
                    <dd>
                        <a href="#">展会活动</a>
                    </dd>
                    <dd>
                        <a href="#">HuaweiTech</a>
                    </dd>
                </dl>
                <dl class="phone-hide">
                    <dt>关于华为</dt>
                    <dd>
                        <a href="#">个人及家庭产品</a>
                    </dd>
                    <dd>
                        <a href="#">新闻</a>
                    </dd>
                    <dd>
                        <a href="#">展会活动</a>
                    </dd>
                    <dd>
                        <a href="#">HuaweiTech</a>
                    </dd>
                </dl>
                <dl class="phone-hide">
                    <dt>关于华为</dt>
                    <dd>
                        <a href="#">个人及家庭产品</a>
                    </dd>
                    <dd>
                        <a href="#">新闻</a>
                    </dd>
                    <dd>
                        <a href="#">展会活动</a>
                    </dd>
                    <dd>
                        <a href="#">HuaweiTech</a>
                    </dd>
                </dl>
                <dl class="phone-hide">
                    <dt>关于华为</dt>
                    <dd>
                        <a href="#">个人及家庭产品</a>
                    </dd>
                    <dd>
                        <a href="#">新闻</a>
                    </dd>
                    <dd>
                        <a href="#">展会活动</a>
                    </dd>
                    <dd>
                        <a href="#">HuaweiTech</a>
                    </dd>
                </dl>
                <dl class="phone-hide">
                    <dt>关于华为</dt>
                    <dd>
                        <a href="#">个人及家庭产品</a>
                    </dd>
                    <dd>
                        <a href="#">新闻</a>
                    </dd>
                    <dd>
                        <a href="#">展会活动</a>
                    </dd>
                    <dd>
                        <a href="#">HuaweiTech</a>
                    </dd>
                </dl>
                <!-- 移动端显示 -->
                <ul class="pc-hide phone-show">
                    <li>
                        <a href="#">关于华为</a>
                        <a href="#" class="iconfont icon-xialajiantouxiao"></a>
                    </li>
                    <li>
                        <a href="#">关于华为</a>
                        <a href="#" class="iconfont icon-xialajiantouxiao"></a>
                    </li>
                    <li>
                        <a href="#">关于华为</a>
                        <a href="#" class="iconfont icon-xialajiantouxiao"></a>
                    </li>
                    <li>
                        <a href="#">关于华为</a>
                        <a href="#" class="iconfont icon-xialajiantouxiao"></a>
                    </li>
                    <li>
                        <a href="#">关于华为</a>
                        <a href="#" class="iconfont icon-xialajiantouxiao"></a>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <div class="left">
                    <a href="#">华为商城</a>
                    <a href="#">华为云</a>
                    <a href="#">华为智能光伏</a>
                    <a href="#">产品定义社区</a>
                    <a href="#">华为心声社区</a>
                </div>
                <div class="right">
                    <a href="#" class="iconfont icon-xinlangweibo"></a>
                    <a href="#" class="iconfont icon-linkedin"></a>
                    <a href="#" class="iconfont icon-weixin"></a>
                    <a href="#" class="iconfont icon-toutiaoyangshi"></a>
                    <a href="#" class="iconfont icon-zhihu-square-fill"></a>
                </div>
            </div>
        </div>
    </footer>
    <!-- 底部导航 -->
    <nav class="nav-bottom">
        <span>&copy;2022&nbsp;华为技术有限公司</span>
        <span>粤A2-20044005号</span>
        <span>粤公安安备44030702002388号</span>
        <span class="phone-hide">|</span>
        <span class="phone-hide">联系我们</span>
        <span class="phone-hide">法律声明</span>
        <span class="phone-hide">隐私政策</span>
        <span class="phone-hide">除名查询</span>
    </nav>
</body>

</html>